<template>
  <div class="dictList">
    <searchForm  ref="searchForm" @on-search="onSearch">
      <addDictBtnDrawer @after-op="onSearch"></addDictBtnDrawer>
    </searchForm>
    <div class="table">
      <el-table
          v-loading="loading"
          :header-cell-style="{background:'#F8F9FA'}"
          :data="tableData"
          :height="'calc(100% - 0px)'"
      >
        <el-table-column
            prop=""
            width="120"
            label="">
        </el-table-column>
        <el-table-column
            prop="dicValue"
            label="编码">
        </el-table-column>
        <el-table-column
            label="名称"
            prop="dicDisplay">
        </el-table-column>
        <el-table-column
            label="操作"
            prop="操作">
          <template slot-scope="scope">

            <el-button type="danger" size="small" @click="handlerDelete(scope.row)">删除</el-button>
            <editDictBtnDrawer @after-op="getDicsByCriteria" :params="scope.row"></editDictBtnDrawer>
            <dictValuesBtn :params="scope.row"></dictValuesBtn>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @handleSizeChange="handleSizeChange"
                  @pageChange="pageChange"></pagination>
    </div>
  </div>
</template>

<script>
import searchForm from "./searchForm";
import dictForm from "./dictForm";
import dict from "@/util/dict";
import pagination from "@/components/pagination";
import dictValuesBtn from "@/views/systemManage/dict/module/dictValuesBtn";
import addDictBtnDrawer from "@/views/systemManage/dict/module/addDictBtnDrawer";
import editDictBtnDrawer from "@/views/systemManage/dict/module/editDictBtnDrawer";
export default {
  name: "dictList",
  components: {
    searchForm,
    dictForm,
    pagination,
    dictValuesBtn,
    addDictBtnDrawer,
    editDictBtnDrawer
  },
  mounted(){
    this.getDicsByCriteria()
  },
  methods: {
    getDicsByCriteria(){
      this.loading = true
      let params = {
        dicParentId:1,
        page:this.pageInfo.page-1,
        pageSize:this.pageInfo.pageSize,
        ...this.$refs.searchForm.form
      }
      this.$api.getDicsByCriteria(params).then(res=>{
        this.loading = false
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
      })
    },
    pageChange(page){
      this.pageInfo.page = page
      this.getDicsByCriteria()
    },
    handleSizeChange(size){
      this.pageInfo.pageSize = size
      this.pageInfo.page = 1
      this.getDicsByCriteria()
    },
    onSearch() {
      this.pageInfo.page = 1
      this.getDicsByCriteria()
    },
    handlerDelete(row) {
      this.$confirm('此操作将删除该数据字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let params = {id: row.id}
        this.$api.delDics(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         this.getDicsByCriteria()
        })
      }).catch(() => {
      });

    },
  },
  data() {
    return {
      tableData: [],
      loading: false,
      pageInfo:{
        ...dict.pageInfo
      },
      dialogVisible: false,

    }
  }
}
</script>

<style scoped lang="less">
.dictList {
  width: 100%;
  height: 100%;
  .table {
    padding: 10px;
    width: calc(100% - 30px);
    height: calc(100% - 160px);
  }
}
</style>